<template>
    <div class="mobile-table-container">
      <el-table
        :data="currentPageData"
        style="width: 100%"
        class="mobile-table"
        :cell-style="{ padding: '8px' }"
      >
        <!-- 动态列 -->
        <el-table-column
          v-for="col in columns"
          :key="col.prop"
          :prop="col.prop"
          :label="col.label"
          :align="col.align || 'center'"
          :width="col.width"
        />
  
        <!-- 操作列 -->
        <el-table-column
          label="操作"
          width="150"
        >
          <template #default="{ row, $index }">
              <el-button type="primary" size="small" @click="handleEdit(row)">修改</el-button>
              <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next"
          :total="total"
          @current-change="handlePageChange"
          @size-change="handleSizeChange"
          small
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue'
  
  const props = defineProps({
    columns: { // 表头配置
      type: Array,
      default: () => []
    },
    data: { // 表格数据
      type: Array,
      default: () => []
    },
    total: { // 总条数
      type: Number,
      default: 0
    }
  })
  
  const emit = defineEmits(['edit', 'delete', 'page-change', 'size-change'])
  
  const currentPage = ref(1)
  const pageSize = ref(10)
  
  // 当前页数据（如果是前端分页）
  const currentPageData = computed(() => {
    return props.data.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value
    )
  })
  // 操作按钮事件
  const handleEdit = (row) => {
    emit('edit', row)
  }
  //删除事件
  const handleDelete = (row) => {
    emit('delete', row)
  }
  
  // 分页事件
  const handlePageChange = (val) => {
    console.log('handlePageChange', val);
    emit('page-change', val)
  }
  const handleSizeChange = (val) => {
    pageSize.value = val
    emit('size-change', val)
  }
  </script>